<template>
  <div id="app">
    <Header></Header>
    <!-- 悬挂功能栏 -->
    <div class="methodMeue">
      <!-- 置顶 -->
      <div class="style">
        <a href="#app">↑</a>
      </div>
      <!-- 客服 -->
      <div class="style">
        <router-link to="/suggest" class="el-icon-s-comment"></router-link>
      </div>
      <!-- 播放音乐 -->
      <div class="style">
         <audio v-show="audio" ref="music" class="audio" src="@/assets/1261270925.mp3" controls></audio>
        <a href="javascript:;" @click="audio=!audio" class="el-icon-headset"></a>
      </div>
      <!-- 随机福利 -->
      <div class="style">
        <a href="javascript:;" class="el-icon-s-opportunity" @click="xy=false">
        </a>
      </div>
    </div>
    <router-view></router-view>
    <!-- 落叶 -->
    <div :style="ly" @click="font_show=!font_show" class="ly">
      <span v-show="font_show">祝您梦想达成</span>
      <img src="@/assets/xx.png" width="100%" height="100%s" alt="">
    </div>
    <!-- 底部声明 -->
  <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/components/header/header'
import Footer from '@/components/footer/footer.vue'
export default({
  components:{Header,Footer},
  data(){
    return{
      audio:false,
      ly:"left:20px",
      font_show:false,
      xy:true,
      loginFlag:false,
    }
  },
  methods:{
  },

  created(){

     this.$confirm('需要来点emo音乐提高氛围吗吗')
          .then(() => {
             this.$refs.music.play()
              this.$alert("已为您进行播放 可在侧边栏进行控制音乐") 

      })
          .catch(() => {});
    // 落叶随机位置
      // 获取x,y
     var xy = setInterval(()=>{
          var x = parseInt(Math.random()*1000)
          var y = parseInt(Math.random()*100)
          this.ly="left:"+x+"px;"+"top:"+y+"px"
          if(this.xy==false){
            this.ly="animation: none !important;opacity:0"
            clearInterval(xy)
          }
      },5000)
  }
})
</script>
<style scoped lang="less">

  .methodMeue{
    width: 60px;
    height: 200px;
    top: 50%;
    right: 30px;
    z-index: 999;
    position: fixed;
    .style{
      width: 100%;
      height: 50px;
      // background: yellow;
      position: relative;
      padding: 10px;
      a{
        color: #000;
        display: block;
        width: 35px;
        height: 35px;
        background: #ffcd35;
        border-radius: 50%;
        text-align: center;
        line-height: 35px;
      }
    }
  }
  .audio{
    width: 160px;
    height: 30px;
    right: 60px;
    position: absolute;
    top: 15px;
  }
  @keyframes ly{
    0%{top: 0%;}
    100%{top: 100%;}
  }
  .ly{
    width: 30px;
    height: 30px;
    position: fixed;
    top: 0;
    z-index: 22;
    
    animation: ly 5s infinite ;
  }
    @media  screen and (max-width: 1900px) {
         .methodMeue{
            top: 70% !important;
      }
     }
</style>

